Jassif Team Institution

Our First SFC Web Page

স্ক্র্যাচ থেকে আমাদের প্রথম SFC ওয়েব পৃষ্ঠা তৈরি করতে আমরা:

• আসুন একটি নতুন ক্লিন ভিউ প্রকল্প তৈরি করি
• 'App.vue' ফাইলে কোডটি লিখি
• চলুন দেখি কিভাবে ওয়েব পৃষ্ঠাটি বিকাশের সময় স্বয়ংক্রিয়ভাবে আপডেট হয়
• আসুন উত্পাদনের জন্য পেজ তৈরি করি

Create a Clean Project

এখন আগের পৃষ্ঠায় আমাদের তৈরি উদাহরণ প্রকল্প থেকে সমস্ত বিষয়বস্তু সরিয়ে ফেলুন এবং Vue-তে আমাদের নিজস্ব সহজ ওয়েব পৃষ্ঠা তৈরি করুন।

কোড লিখতে শুরু করার আগে, <টেমপ্লেট>, <স্ক্রিপ্ট> এবং <স্টাইল> ট্যাগের মধ্যে থাকা সমস্ত বিষয়বস্তু এবং 'সেটআপ' বা 'স্কোপড'-এর মতো যেকোনো বৈশিষ্ট্য মুছে ফেলুন।

আপনার 'App.vue' ফাইলটি এখন এইরকম হওয়া উচিত:

<script></script>

<template></template>

<style></style>

এছাড়াও 'src' ফোল্ডারের ভিতরে 'সম্পদ' এবং 'কম্পোনেন্ট' ফোল্ডারগুলি সরিয়ে ফেলুন।

'main.js' ফাইলে যেখানে সম্পদ আমদানি করা হয় সেই লাইনটি সরান যাতে 'main.js' এর মতো দেখায়:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

এখন আমাদের সাথে কাজ করার জন্য একটি ফাঁকা প্রকল্প আছে।

Write code in 'App.vue'

এখন যেহেতু আমাদের একটি পরিষ্কার প্রকল্প আছে, <টেমপ্লেট> ট্যাগের ভিতরে একটি শিরোনাম যুক্ত করুন, এইভাবে:

<template>
  <h1>Hello World!</h1>
</template>

<script></script>
<style></style>

'App.vue' ফাইলটি সংরক্ষণ করুন এবং টার্মিনালে স্থানীয় হোস্ট লিঙ্কটি অনুসরণ করে আপনার ব্রাউজারে নেভিগেট করুন। আপনি কি ফলাফল দেখতে পাচ্ছেন? ব্রাউজারটি এখন স্বয়ংক্রিয়ভাবে রিফ্রেশ করা উচিত যখন আপনি VS কোডে একটি পরিবর্তন সংরক্ষণ করবেন, ম্যানুয়ালি ব্রাউজার পুনরায় লোড করার পরিবর্তে।

এখন একটু বড় Vue উদাহরণ দেখি:

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'This is some text'
    };
  }
};
</script>

<style></style>

Development vs Production

Vue SFC প্রকল্প চালানোর জন্য মূল কমান্ড:

# অপ্টিমাইজড প্রোডাকশন ফাইল তৈরি করতে npm রান বিল্ড # স্থানীয়ভাবে উত্পাদন বিল্ডের পূর্বরূপ দেখুন npm রান প্রিভিউ

Vue Exercises

ডেভেলপমেন্ট মোডে প্রজেক্ট চালানোর জন্য আমাদের কি কমান্ড লিখতে হবে?

npm ______